/*
* @Date: 2021/2/4
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import Icon from 'components/Icon';
import { message } from 'antd';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material-darker.css';
import 'codemirror/addon/hint/show-hint.css';
import CodeMirror from 'codemirror/lib/codemirror';
import 'codemirror/mode/jsx/jsx';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/javascript-hint';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/comment-fold';

import './index.scss';

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    const { content, type, args, name } = this.props;
    this.codeMirror = CodeMirror.fromTextArea(this.myRef.current, {
      mode: 'text/jsx',
      lineNumbers: true,
      theme: 'material-darker',
      matchBrackets: true,
      hintOptions: {
        completeSingle: false
      },
      autocapitalize: true,
      foldGutter: true,
      lineWrapping: true,
      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
    });
    this.codeMirror.on('inputRead', () => {
      this.codeMirror.showHint();
    });
    this.codeMirror.setOption('extraKeys', {
      'Ctrl-S': (cm) => {
        this.onCodeChange();
      }
    });
    if (Number(type) === 0) {
      const code = `function ${name} ${args} {\n\t${content}\n}`;
      this.codeMirror.setValue(code);
    } else {
      this.codeMirror.setValue(content);
    }
  }

  onCodeChange = () => {
    const { onCodeChange } = this.props;
    const code = this.codeMirror.getValue().trim();
    let name = '';
    let arg = '';
    let content = '';
    if (!/^function\s+([a-zA-Z_]+)\s\([^\)]*\)\s*\{/.test(code)) {
      message.error('请正确书写函数格式');
      return;
    }
    const nameReg = /^function\s+([a-zA-Z_]+)\s\([^\)]*\)\s*\{/;
    const nameRegResult = nameReg.exec(code);
    if (nameRegResult) {
      name = nameRegResult[1];
    }
    const argReg = /^function\s+[a-zA-Z_]+\s(\([^\)]*\))\s*\{/;
    const argRegResult = argReg.exec(code);
    if (argRegResult) {
      arg = argRegResult[1];
    }
    const contentReg = /^function\s+[a-zA-Z_]+\s\([^\)]*\)[\s|\t]*\{([\s\S]*)\}$/;
    const contentRegResult = contentReg.exec(code);
    if (contentRegResult) {
      content = contentRegResult[1];
    }
    onCodeChange && onCodeChange({
      name,
      arg,
      content,
    });
  }

  render() {
    return (
      <div className="editor-frameworker">
        <div className="editor-tool-bar">
          <Icon type="save" onClick={this.onCodeChange}/>
        </div>
        <div className="editor-wrapper">
          <textarea ref={this.myRef} className="code-mirror" onChange={this.onCodeChange}>

          </textarea>
        </div>
      </div>
    );
  }
}
